<template>
  <div class="outer">
    <headers @back-click="back()" :headers="headers"></headers>
    <scroll :topArea="44" :bottomArea="52" ref="confirmService" :pullDownRefresh="false" :pullUpLoad="false" :data="expressList">
      <div class="detail-area">
        <div class="detail-content" style="border:none">
            <div class="img-area">
                <img :src="serviceOrder.image" alt="图片">
            </div>
            <div class="content-area">
                <div class="title">{{serviceOrder.goodsName}}</div>
                <div class="price">价值： ￥{{(serviceOrder.price/100).toFixed(2)}}</div>
                <div class="sku">
                    <div class="sku-item" v-for="c in serviceOrder.standard" :key="c.id">{{c.name}}</div>
                </div>
            </div>
        </div>
      </div>
      <div class="no-permission">
          <div class="title">商家联系方式</div>
          <div class="merchant-info">
            <div class="info-item">
              <div>商家名称:</div>
              <div>{{merchantInfo.contactName}}</div>
            </div>
            <div class="info-item">
              <div>商家电话:</div>
              <div class="phone">{{merchantInfo.contactNumber}}</div>
            </div>
            <div class="info-item">
              <div>商家地址:</div>
              <div>{{merchantInfo.address}}</div>
            </div>
          </div>
      </div>
      <div class="contact-area" @click="goSelect()" v-show="serviceOrder.category !='return'">
         <div class="title">请选择收获地址及联系人</div>
         <div class="content">
           <div class="name">
             <div>{{address.name}}</div>
             <div v-show="address.defaulted">默认</div>
           </div>
           <div class="address">
             <div>{{address.phone}}</div>
             <div>{{address.country}}{{address.provice}}{{address.city}}{{address.regoin}}{{address.text}}</div>
           </div>
           <i class="icon ion-chevron-right"></i>
         </div>
         <div class="info">
          (该地址为商家{{ serviceOrder.category =="repair" ? "维修" : "换货"}}后給你邮寄的地址)
         </div>
      </div>
      <div class="kuaidi" v-if="expressList.length>0">
         <div class="title">
           快递公司选择
         </div>
         <div class="inputs-area" @click="selExpress()">
           <div>{{selectedExpress.value ? selectedExpress.value : expressList[0].value}}</div>
           <i class="icon ion-chevron-right"></i>
         </div>
         <div class="title">填写快递单号及运费</div>
         <div class="inputs-area">
           <input type="text" placeholder="请填写你发货的快递单号" v-model="inputModel.expId">
         </div>
         <div class="inputs-area has-margin">
           <input type="text" placeholder="请填写运费" v-model="inputModel.expExpense">
           <div>元</div>
         </div>
      </div>
      <div class="infos">
        {{serviceOrder.bottomMsg}}
      </div>
    </scroll>
    <div class="button-area">
      <div class="button button-confirm" @click="submitReq()">提交</div>
    </div>
  </div>
</template>

<script>
import { Picker } from 'vux'
import {getMerchantInfo,getLogisticsCompany,sendServiceGood} from "@/api/homepage.js"
import apiService from "@/api/homepage.js"
export default {
  name: 'comfirmService',
  data: function(){
    return {
      headers: {
        title: ""
      },
      selectedExpress: {},
      expressList: [],
      address: {},
      inputModel: {},
      serviceOrder: {},
      merchantInfo: {},
    }
  },
  components: {
    Picker
  },
  methods: {
    back: function(){
      this.$router.go(-1);
    },
    getAddress: function(){

    },
    fetchMerchantInfo: function(){
      getMerchantInfo(this.serviceOrder.serviceOrderId).then( data => {
        if(data.code == 200){
          this.merchantInfo = data.data;
        }else {
          this.merchantInfo = {};
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    goSelect: function(){
      localStorage.goState = 'confirmRepair';
      // $state.go('addressManage');
    },
    getExpress: function(){
      let self = this;
      getLogisticsCompany().then( data => {
        if(data.code == 200){
          data.data.forEach(function(item){
            let map = {};
            map.id = item.id;
            map.value = item.name;
            self.expressList.push(map);
          })
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    getAddress: function(){
      let self = this;
      apiService.getContact().then(data => {
        if(data.code == 200){
            if(data.data && data.data.length>0){
                data.data.forEach(function(item){
                    if(item.defaulted == true){
                        self.address = item;
                    }
                })
                if(Object.getOwnPropertyNames(self.address).length = 0){
                    self.address = data.data[0];
                }
            }
        }else {
            this.$vux.toast.show({
              text: data.message,
              time: 1000,
              width: 'auto',
              // position: 'middle'
            })
        }
      })
    },
    submitReq: function(){
      let param = {};
      param.serviceOrderId = this.serviceOrder.serviceOrderId;
      param.contactName = this.address.name;
      param.contactNumber = this.address.phone;
      param.address = this.address.provice +   this.address.city + this.address.regoin + this.address.text;
      if(this.inputModel.expId){
        param.expressNo = this.inputModel.expId; 
      }
      param.expressCompany = this.selectedExpress.id ? this.selectedExpress.id : this.expressList[0].id;
      if(this.inputModel.expExpense){
        param.freight = this.inputModel.expExpense;
      }
      sendServiceGood(this.serviceOrder.serviceOrderId,param).then( data => {
        if(data.code != 200){
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }else {
          localStorage.removeItem("serviceOrder");
          // $state.go('submitSuccess', { state: $scope.serviceOrder.category});
        }
      }) 
    }
  },
  mounted: function(){
    if(localStorage.serviceOrder){
      this.serviceOrder = JSON.parse(localStorage.serviceOrder);
      this.headers.title = this.serviceOrder.title;
    }
    if(sessionStorage.selectedAddress){
      this.address = JSON.parse(sessionStorage.selectedAddress)
        sessionStorage.removeItem("selectedAddress");
    }else {
      this.getAddress();
    }
    this.fetchMerchantInfo();
    this.getExpress();
    if(localStorage.goState){
        localStorage.removeItem('goState');
    }
  },
}
</script>
<style lang="scss" scoped>
.outer {
  height: 100%;
  width: 100%;
  position: absolute;
}
  .contact-area {
    width: 100%;
    background: #fff;
    padding: 0 16px;
    margin-top: 12px;
    & .title {
      height: 50px;
      width: 100%;
      line-height: 50px;
      color: #333;
      font-size: 14px;
    }
    & .content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
      border-top: 1px solid #eee;
      min-height: 68px;
      & .name {
        height: 100%;
        width: 66px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        &>div {
          &:first-child {
            font-size: 14px;
            color: #333;
            width: 56px;
            display:block;
            white-space:nowrap; 
            overflow:hidden; 
            text-overflow:ellipsis;

          }
          &:last-child {
            font-size: 12px;
            height: 19px;
            line-height: 19px;
            padding: 0 5px;
            color: #69afff;
            border: 1px solid #69afff;
            margin-top: 8px;
            border-radius: 3px;
          }
        }
      }
      & .address {
        width: 264px;
        height: 100%;
        &>div {
          width: 100%;
          display:block;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          &:first-child {
            color: #333;
            font-size: 14px;
            line-height: 16px;
          }
          &:last-child {
            font-size: 12px;
            color: #666;
            margin-top: 10px;
          }
        }
      }
      &>i {
        color: #666;
        display: block;
        height: 100%;
      }
    }
    & .info {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: left;
      font-size: 11px;
      color: #999;
    }
  }
  .kuaidi {
    padding: 0 16px;
    margin-top: 12px;
    background: #fff;
    padding-bottom: 12px;
    & .title {
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      color: #666;
    }
    & .inputs-area {
      border: 1px solid #eee;
      border-radius: 3px;
      padding: 0 12px;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &>div {
        font-size: 14px;
        color: #666;
      }
      &>input {
        width: 90%;
      }
      &>i {
        color: #666;
        transform: rotate(90deg);
      }
      &.has-margin {
        margin-top: 12px;
      }
    }
  }
  .infos {
    min-height: 36px;
    padding: 0 16px;
    line-height: 16px;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
  }
  .button-area {
    background: #f7f7f7;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 300;
    height: 52px;
    bottom: 0;
    right: 0;
    left: 0;
    &>div {
      width: 100%;
    }
  }
</style>